import { NodeSize } from '../config'

export default function replaceString(flow) {
  flow.register('ReplaceString', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#0CB20F',
              d: 'M435.687619 637.70819l47.640381 47.640381h-110.494476a84.358095 84.358095 0 0 1-84.260572-84.260571v-15.555048h-46.323809v15.555048a130.730667 130.730667 0 0 0 130.584381 130.584381h110.494476l-47.640381 47.640381 32.768 32.768 103.570286-103.570286-103.570286-103.570286-32.768 32.768zM865.865143 679.984762c33.792-12.629333 43.544381-34.377143 43.544381-63.585524v-44.129524c0-50.41981-29.817905-77.360762-89.941334-77.360762h-147.260952V876.495238h155.257905c57.319619 0 94.549333-28.647619 94.549333-81.92v-45.83619c-0.024381-40.69181-22.918095-63.024762-56.149333-68.754286z m-144.408381-142.677333h95.134476c29.793524 0 43.52 11.459048 43.52 36.083809v42.983619c0 27.501714-14.336 44.690286-51.565714 44.690286h-87.088762v-123.757714z m151.283809 253.269333c0 28.647619-17.188571 43.52-52.150857 43.52h-99.132952v-130.608762h96.280381c37.814857 0 55.003429 16.62781 55.003428 46.982095v40.106667z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M376.441905 529.115429h49.859047L297.374476 147.529143H230.936381L102.009905 529.115429h49.834666l30.96381-91.672381h162.133333l31.500191 91.672381zM195.974095 394.48381l68.193524-211.43162 68.144762 211.43162H195.974095z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '字符串替换'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
